<template>
	<view class="container">
		<view class="top">
			<view class="top-image">
				<view class="iconfont icon-weidenglu-touxiang image"></view>  
				<!-- <image class="image" src="../../static/missing-face.png" mode=""></image> -->
			</view>
			<view class="top-name">
				{{name}}
			</view>
			<view class="top-list">
				<view>
					<view class="iconfont icon-u-fuben image1" :class="taici==1?'checked':''"></view>  
					<view class="texts" :class="taici==1?'checked':''">普通会员</view>
				</view>
				<view>
					<view class="iconfont icon-u image1" :class="taici==2?'checked':''" ></view>  
					<view class="texts" :class="taici==2?'checked':''" >黄金会员</view>
				</view>
				<view>
					<view class="iconfont icon-u2 image1" :class="taici==3?'checked':''"></view>  
					<view class="texts" :class="taici==3?'checked':''">铂金会员</view>
				</view>
				<view>
					<view class="iconfont icon-u1 image1" :class="taici==4?'checked':''"></view>  
					<view class="texts" :class="taici==4?'checked':''">经纪人</view>
				</view>
			</view>
			<view class="top-button">
				<view class="top-button-image"  @click="pageTo">
					<image src="../../static/button1.png" style="width: 230upx; height: 75upx;" mode=""></image>
					<view class="top-button-text">积分   {{SPPOINT}}</view>
				</view>
				
				
			</view>
		</view>
		
	<!-- 	<view class="mid">
			<view class="mid-top">
				我的特权
			</view>
			<view class="mid-mid">
					<view class="mid-button" @click="togglePopup('middle-img',0)">
						<view class="iconfont icon-mianyunfei text"></view>  
						<view class="text2">减免运费 </view>
					</view>
					
					<view class="mid-button" @click="togglePopup('middle-img',1)">
						<view class="iconfont icon-u4 text"></view>  
						<view class="text2">签到奖励 </view>
					</view>
					<view class="mid-button" @click="togglePopup('middle-img',2)">
						<view class="iconfont icon-u5 text"></view>  
						<view class="text2">评价奖励 </view>
					</view>
					<view class="mid-button" @click="togglePopup('middle-img',3)">
						<view class="iconfont icon-u7 text"></view>  
						<view class="text2">专享活动 </view>
					</view>
					<view class="mid-button" @click="togglePopup('middle-img',4)">
						<view class="iconfont icon-u3 text1"></view>  
						<view class="text1">会员特价 </view>
					</view>
					<view class="mid-button" @click="togglePopup('middle-img',5)">
						<view class="iconfont icon-u6 text1"></view>  
						<view class="text1">生日礼包 </view>
					</view>
			</view>
			<view class="mid-bottom">
				更多特权敬请期待
			</view>
			
			<uni-popup :show="type === 'middle-img'" position="middle" mode="insert"  button-mode="right" @hidePopup="togglePopup('')">
					<view class="uni-margin-wrap">
						<swiper class="swiper" indicator-dots="true" circular="true" :current="index" >
							<swiper-item class="swiper-item">
								<view class="iconfont icon-mianyunfei"></view>  
								<view class="text">减免运费 </view>
								<view class="text1">会员购买商品单笔订单总金额达到标准后可免运费，不同等级会员满免运费标准不同</view>
							</swiper-item >
							<swiper-item class="swiper-item">
								<view class="iconfont icon-u4"></view>  
								<view class="text">签到奖励 </view>
								<view class="text1">会员每天最多可签到1次，签到后获得相应的奖励。连续签到多天可获得额外的奖励</view>
							</swiper-item>
							<swiper-item class="swiper-item">
								<view class="iconfont icon-u5 "></view>  
								<view class="text">评价奖励 </view>
								<view class="text1">会员成功提交评论即获得相应的积分奖励，不同等级会员给予不同数量的积分奖励</view>
							</swiper-item>
							<swiper-item class="swiper-item">
								<view class="iconfont icon-u7 "></view>  
								<view class="text">专享活动 </view>
								<view class="text1">黄金及以上会员专享活动，不定期福利优先享（看电影、烘焙课程，线下趴等）</view>
							</swiper-item>
							<swiper-item class="swiper-item">
								<view class="iconfont icon-u3 "></view>  
								<view class="text">会员特价 </view>
								<view class="text1">黄金及以上会员可在指定页面，享有会员价优惠商品</view>
							</swiper-item>
							<swiper-item class="swiper-item">
								<view class="iconfont icon-u6 "></view>  
								<view class="text">生日礼包 </view>
								<view class="text1">完善生日资料，经纪人可在生日周期间获得惊喜生日礼包</view>
							</swiper-item>
						</swiper>
						
						<view class="yticon icon-fork badge" @click="togglePopup('')"></view>
						
					</view>
			</uni-popup>
		</view> -->
		<!-- <view class="foot">
			<view class="foot-top">
				
				<view class="foot-top-left">
					我的任务
				</view>
				<view class="foot-top-right" @click="navTotaskcenter">
					更多
				</view>
			</view>
			<view class="foot-down">
				<view class="foot-down-demo">
					<view class="foot-left">
						<view class="left-up">
							完成首次登录
						</view>
						<view class="left-down">
							积分+1，积分+1
						</view>
					</view>
					<view >
						<button class="foot-right" type="primary" ></button>
						<view class="foot-right-up">做任务</view>
					</view>
				</view>
				<view class="foot-down-demo">
					<view class="foot-left">
						<view class="left-up">
							完成首次登录
						</view>
						<view class="left-down">
							积分+1，积分+1
						</view>
					</view>
					<view >
						<button class="foot-right" type="primary" ></button>
						<view class="foot-right-up">做任务</view>
					</view>
				</view>
				
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniBadge from '@/components/uni-badge/uni-badge.vue';
	export default {
		components: {
			uniBadge,
			uniPopup
		},
		data() {
			return {
				type: '',
				index: 0,
				name:'',
				taici:'',
				SPPOINT:'',
			}
		},
		onLoad() {
			this.loadData()
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async loadData(){
				this.$http.post("/user/info",{
							SIGNATURE:uni.getStorageSync("SIGNATURE"),
							TOKEN:uni.getStorageSync('userInfo').TOKEN,
				}).then(res=>{
					if(res.data.STATE == '903'||res.data.STATE == '904'){
						uni.navigateTo({
						 url:'/pages/public/login1'
						})
					}else if(res.data.STATE==='0' && res.statusCode===200){
						const user=res.data.OBJECT;
						this.name=user.NAME;
						this.taici=user.TAICI;
						this.SPPOINT=user.SPPOINT;
					}
				}).catch(err=>{
							console.log('request fail',err);
				})
			},
			
			togglePopup(type,index) {
				this.type = type;
				this.index = index;
			},
			pageTo(){
				uni.navigateTo({  
					url: '/pages/growup/growup'
				})  
			}, 
			//任务中心页
			navTotaskcenter() {
				uni.navigateTo({
					url: `/pages/taskcenter/taskcenter`
				})
			},
		},
						// #ifndef MP
		
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap() {
				// #ifdef APP-PLUS
				// const pages = getCurrentPages();
				// const page = pages[pages.length - 1];
				// const currentWebview = page.$getAppWebview();
				// currentWebview.hideTitleNViewButtonRedDot({
				// 	index
				// });
				// #endif
				uni.navigateTo({
					url: '/pages/memberHelp/memberHelp?state=0'
				})
		}
		// #endif
	}
	
	
</script>
	
<style lang="scss">
	.container{
		margin: 10upx;
		background-color: #f5f5f5;
	}
	
	
	.uni-margin-wrap {
		
		background-color: #fff;
		border: 2upx solid #9D9D9D;
		border-radius: 10%;
		width:500upx;
		height: 500upx;
		margin:0 30upx;
	}
	.swiper{
		height: 500upx;
	}
	
	.swiper-item {
		margin-top: 30upx;
		display: block;
		text-align: center;
		.iconfont{
			margin-top: 20upx;
			margin-left: 0upx;
			font-size: 150upx;
			color: #E02E24;
			background-color: #fff;
			border: 0upx solid #fff;
		}
		.text{
			color: dimgrey;
		}
		.text1{
			text-align: left;
			margin: 40upx 30upx;
			color: #9d9d9d;
			font-size: 20upx;	
		}
		
		
	}
	.badge{
			position:absolute;
			top:40upx;
			right:70upx;
			color: #9d9d9d;
			display:flex;
			}
	.top{
		border: 1upx solid #f5f5f5;
		background-color: #fff;
		margin-bottom: 80upx;
		height: 530upx;
	}
	.top-image{
		height: 230upx;
		.iconfont{
			background: #fff;
			max-height: 155upx;
			max-width: 150upx;
			border: 1upx solid #fff;
			margin-left: 280upx;
			padding-top: 50upx;
			color: #d9d9d9;
			font-size: 160upx;
			
		}
	}
	
	.top-name{
		padding-bottom: 80upx;
		margin-left: 145upx;
		border-bottom: 2upx solid #d9d9d9;
		width: 60%;
		text-align: center;
		font-size: 40upx;
		color: #9D9D9D;
	}
	.top-list{
		display: flex;
		position:absolute;
		margin-top: -40upx;
		margin-left: 40upx;
		width: 90%;
		text-align: center;
		font-size: 30upx;
	}
	.iconfont{
		color: #9D9D9D;
		font-size: 70upx;
		margin-left: 60upx;
		margin-right: 20upx;
		background-color: #f5f5f5;
		border: 1upx solid #9d9d9d;
		border-radius: 100%;
		&.checked{
			background: #fff;
			color: #ffa847;
			border-color: #ffa847;
		}
	}
	.texts{
		padding-top: 10upx;
		color: #d9d9d9;
		font-size: 20upx;
		padding-left: 40upx;
		&.checked{
			color: #ffa847;
		}
	}
	.top-button{
		position:absolute;
		.top-button-image{
			position: relative;
			left: 250upx;
			top: 128upx;
			
			.top-button-text{
				position: relative;
				font-size: 25upx;
				top: -65upx;
				text-align: center;
				color: #fff;
			}
		}
		
	}
	
	// .button{
	// 	width: 60upx;
	// 	border-radius: 30%;
	// 	background-color: #E02E24;
	// 	top: 160upx;
	// 	left: 240upx;
	// 	height: 60upx;
	// }
	
	.mid{
		border: 1upx solid #f5f5f5;
		background-color: #fff;
		margin-bottom: 40upx;
		font-size: 30upx;
	}
	.mid-top {
		padding: 40upx 20upx;
		border-bottom: 1upx solid #f5f5f5;
	}
	.mid-mid{
		display: flex;
		flex-wrap: wrap; 
		height: 420upx;
	}
	.mid-button{
		padding-top: 40upx;
		width: 33.3%;
		display: flex;
		flex-direction: column;
		text-align: center;
		border: 1upx solid #f5f5f5;
		.iconfont{
			padding-left: 20upx;
			padding-bottom: 10upx;
			margin-left: 0upx;
			font-size: 80upx;
			background-color: #fff;
			border: 1upx solid #fff;
		}
		.text{
			color: #E02E24;
		}
		.text2{
			color: #9D9D9D;
		}
		
	}
	
	.text{
		color: #9D9D9D;
	}
	.text1{
		color: #d9d9d9;
	}
	.mid-bottom{
		text-align: center;
		color: #9D9D9D;
		padding: 40upx 20upx;
		border-top: 1upx solid #f5f5f5;
		font-size: 20upx;
	}
	.foot{
		border: 1upx solid #f5f5f5;
		background-color: #fff;
		font-size: 30upx;
		color: #9d9d9d;
	}
	.foot-top{
		display: flex;
		padding: 40upx 20upx;
		border-bottom: 1upx solid #f5f5f5;
	}
	.foot-top-right{
		position:absolute;
		right: 30upx;
	}
	.foot-down{
		padding:  10upx 20upx;
		.foot-down-demo{
			display: flex;
			padding-top: 20upx;
			height: 120upx;
			border-bottom: 1upx solid #d9d9d9;
			.foot-right{
				position:absolute;
				right: 30upx;
				margin-top: 10upx;
				width: 180upx;
				max-height: 60upx;
				background-color:  #E02E24 ;
			}
			.foot-right-up{
				position:absolute;
				left: 580upx;
				margin-top: 20upx;
				color: #fff;
			}
		}
	}
	
	.left-up{
		color: #000000;
	}
	.left-down{
		font-size: 20upx;
	}
	
</style>
